<template>
	<view class="page">
		<view class="title">
			2.3.swiper滑块视图容器的用法
		</view>
		<view class="">
			官网链接API
			<uni-link href="https://uniapp.dcloud.net.cn/component/swiper.html" text="swiper"
				color="#007BFF"></uni-link>
		</view>
		<swiper class="swiper" circular indicator-dots autoplay interval="2000" easing-function="easeInCubic">
			<swiper-item>
				<view class="swiper-item uni-bg-red">
					<image src="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/1.jpg" class="img"
						mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">
					<image src="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/2.jpg" class="img"
						mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					<image src="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/3.jpg" class="img"
						mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="bold">
			主要属性并且值为布尔类型的值有
		</view>
		<view selectable="">indicator-dots 是否显示导航点</view>
		<view selectable="">autoplay 自动播放</view>
		<view class="blue">
			vertical 是否垂直 值为ture时候 幻灯片是上下切换，适用场景适合做首页的滚动新闻
		</view>
		<view>类型为数值的参数有：</view>
		<view>interval 自动切换时间间隔 <text selectable>interval="5000"</text></view>
		<view>circular 衔接滑动无限循环</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
</script>

<style lang="scss" scoped>
	.swiper {
		height: 360rpx;
		margin: 48rpx 0;
	}
</style>